<template>
  <view v-if="goods_info.goods_id" class="goods-detail-container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="(item, index) in goods_info.pics" :key="index">
        <image :src="item.pics_big" @click="preview(index)"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <text class="price">￥{{ goods_info.goods_price }}</text>
      <view class="info-detail">
        <text class="info-left">{{ goods_info.goods_name }}</text>
        <view class="info-right">
          <uni-icons type="star" size="23" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <text class="kuaidi">快递：免运费</text>
    </view>
    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
    </view>
    <!-- 商品详情信息 -->
    <rich-text :nodes="goods_info.goods_introduce"></rich-text>

    <!-- 加入购物车弹层 -->
    <van-action-sheet :show="show" :title="mode === 'cart' ? '加入购物车' : '立刻购买'" cancel-text="取消" @cancel="onCancel" @close="onClose">
      <view class="product">
        <view class="product-title">
          <view class="left">
            <img :src="goods_info.goods_big_logo" alt="" />
          </view>
          <view class="right">
            <view class="price">
              <span>¥</span>
              <span class="nowprice">{{ goods_info.goods_price }}</span>
            </view>

            <view class="count">
              <span>库存</span>
              <span>{{ goods_info.goods_number }}</span>
            </view>
          </view>
        </view>
        <view class="num-box">
          <span>数量</span>
          <!-- 加减数字组件 -->
          <count-box v-model="cartCount"></count-box>
        </view>
        <view class="showbtn" v-if="goods_info.goods_number > 0">
          <view class="btn" v-if="mode === 'cart'" @click="addCartTo">加入购物车</view>
          <view class="btn now" v-else @click="buyNowTo">立刻购买</view>
        </view>
        <view class="btn-none" v-else>该商品已抢完</view>
      </view>
    </van-action-sheet>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
// import CountBoxVue from '@/components/count-box/count-box.vue';
export default {
  // components: {
  //   CountBoxVue
  // },
  computed: {
    ...mapState('m_cart', ['cart']),
    ...mapGetters('m_cart', ['total'])
  },
  data() {
    return {
      // 商品详情对象
      goods_info: {},
      show: false, // 控制弹层显示隐藏
      mode: 'cart', // 标记弹层状态
      cartCount: 1, // 数字框绑定的数据
      options: [
        {
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: 'red'
        },
        {
          icon: 'cart',
          text: '购物车',
          info: 0
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
      ]
    };
  },
  onLoad(options) {
    const goods_id = options.goods_id;
    // 调用请求商品详情数据的方法
    this.getGoodsDetail(goods_id);
  },
  methods: {
    // ...mapMutations('m_cart', ['addToCart']),
    ...mapActions('m_cart', ['addToCart']),
    // 定义请求商品详情数据的方法
    async getGoodsDetail(goods_id) {
      const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', {
        goods_id
      });
      if (res.meta.status !== 200) return uni.$showMsg();

      // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题
      res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block"');
      // 为 data 中的数据赋值
      this.goods_info = res.message;
    },
    preview(i) {
      uni.previewImage({
        current: i,
        urls: this.goods_info.pics.map((item) => item.pics_big)
      });
    },
    onClick(e) {
      console.log(e);
      if (e.content.icon === 'cart') {
        uni.switchTab({
          url: '/pages/cart/cart'
        });
      }
    },
    onCancel() {
      this.show = false;
    },
    onClose() {
      console.log('bb');
      this.show = false;
      this.cartCount = 1;
    },
    buttonClick(e) {
      if (e.content.text === '加入购物车') {
        this.show = true;
        this.mode = 'cart';
      } else {
        this.show = true;
        this.mode = 'buy';
      }
    },
    addCartTo() {
      if (this.goods_info.goods_number < this.cartCount) return uni.$showMsg('商品库存不够！');
      const goods = {
        goods_id: this.goods_info.goods_id, // 商品的Id
        goods_name: this.goods_info.goods_name, // 商品的名称
        goods_price: this.goods_info.goods_price, // 商品的价格
        goods_count: this.cartCount, // 商品的数量
        goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
        goods_state: false // 商品的勾选状态
      };
      this.addToCart(goods)
        .then(() => {
          uni.$showMsg('添加购物车成功！');
        })
        .catch(() => {
          uni.$showMsg('添加购物车失败！');
        });
      this.onClose();
    }
  },

  watch: {
    total: {
      // const result = this.options.find(x => x.icon === 'cart');
      // if (result) {
      //   result.info = newVal;
      // }
      handler(newVal) {
        this.options[1].info = newVal;
      },
      immediate: true
    }
  }
};
</script>

<style lang="scss">
swiper {
  height: 750rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.goods-info-box {
  padding: 20px 10px;

  .price {
    color: #c00000;
    font-size: 18px;
  }

  .info-detail {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 10px 0;

    .info-left {
      font-size: 14px;
      padding-right: 5px;
    }

    .info-right {
      width: 120px;
      color: #8a8a8a;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 2px solid #e3e3e3;
    }
  }

  .kuaidi {
    font-size: 12px;
    color: #8a8a8a;
  }
}

.goods_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.goods-detail-container {
  padding-bottom: 50px;
}

// 弹层
.product {
  .product-title {
    display: flex;
    .left {
      img {
        width: 120px;
        height: 120px;
      }
      margin: 10px;
    }
    .right {
      flex: 1;
      padding: 10px;
      .price {
        font-size: 14px;
        color: #fe560a;
        .nowprice {
          font-size: 24px;
          margin: 0 5px;
        }
      }
    }
  }
  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    padding-right: 20px;
    align-items: center;
  }
  .btn,
  .btn-none {
    height: 40px;
    line-height: 40px;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 148, 2);
  }
  .btn.now {
    background-color: #fe5630;
  }
  .btn-none {
    background-color: #cccccc;
  }
}
</style>
